<template>
	<view>
		<div>
			<el-header height="130px" class="header dflex_b" ref="headerRef">
				<div class="crpr" @click="foldChange">
					<i v-if="!fold" class="el-icon-s-fold"></i>
					<i v-else class="el-icon-s-unfold"></i>
				</div>
			</el-header>
		</div>
	</view>
</template>

<script setup>
	import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	const fold = ref(false)
	
	const foldChange = () => {
		fold.value = !fold;
		
		if (fold) {
			if (document.getElementsByTagName('html')[0] && proxy.$refs.headerRef.$el) {
				document.getElementsByTagName('html')[0].style.cssText =
					'--status-bar-height:0px; --top-window-height:128px; --window-left:64px; --window-right:0px; --window-margin:0px; --window-top:calc(var(--top-window-height) + 0px); --window-bottom:0px;';
				proxy.$refs.headerRef.$el.style.left = 'var(--window-left)';
			}
		} else {
			if (document.getElementsByTagName('html')[0] && proxy.$refs.headerRef.$el) {
				document.getElementsByTagName('html')[0].style.cssText =
					'--status-bar-height:0px; --top-window-height:128px; --window-left:180px; --window-right:0px; --window-margin:0px; --window-top:calc(var(--top-window-height) + 0px); --window-bottom:0px;';
				proxy.$refs.headerRef.$el.style.left = 'var(--window-left)';
			}
		}
		
		uni.$emit('fold', fold)
	}
	
	onMounted(() => {
		uni.$on('loginIn', () => {
			fold.value = true
			foldChange()
			
			// this.setUserMsg()
			// this.getMessageCnt()
		})
	})
</script>

<style>

</style>
